<template>
  <el-dialog
    v-model="dialogVisible"
    title="详情"
    width="1400"
    :before-close="
      () => {
        dialogVisible = false
      }
    "
  >
    <el-table
      :data="list"
      :header-cell-style="{ background: '#f5f7fa' }"
      border
      stripe
      style="width: 100%"
      height="500"
      highlight-current-row
    >
      <template v-for="item in column" :key="item.value">
        <el-table-column
          v-if="item.isShow == 'true'"
          align="center"
          :label="item.label"
          :width="item.width"
          height="500"
          show-overflow-tooltip
        >
          <template #default="scope">
            <template v-if="isDate(item.value)">
              <span>{{ formatDate(scope.row[item.value]) }}</span>
            </template>
            <template v-else>
              <span>{{ scope.row[item.value] }}</span>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watchEffect } from 'vue'
import * as BasicApi from '@/api'
import { isDate, formatDate } from '@/utils/formatDate'
import { objectToQueryParams } from '@/utils/objectToQuery'
import { useMessage } from '@/hooks/useMessage'
import { getColWidth, setLastWidth } from './FormatData'

const column = ref<any[]>([])
const list = ref<any[]>([])

const queryParams = reactive({
  groupName: '',
  jobType: ''
})

const dialogVisible = ref(false)
const open = async (query: any, row: any) => {
  Object.assign(queryParams, query)
  const inputStr = objectToQueryParams({
    groupName: queryParams.groupName,
    jobType: queryParams.jobType,
    operType: 'Detail'
  })
  const res = (await BasicApi.Query({ inputStr, jsonData: row })) as any
  if (res.code !== 200) {
    message.error(res.msg)
    return
  }
  const { listInfo, fieldInfo } = res.data
  list.value = listInfo ?? []
  column.value = fieldInfo ?? []
  dialogVisible.value = true
}
defineExpose({ open })
const message = useMessage()

watchEffect(() => {
  if (column.value.length) {
    column.value = getColWidth(column.value, 1360)
    setLastWidth(column.value, 1360)
  }
})
</script>
